<template>
	<div class="city">
	
		<city-head />

		<city-search 
            v-bind:cities="cities" />

		<!-- cities是所有城市用，letter会改变，引起当前组件内部刷新 -->
		<city-list 
            v-bind:cities="cities" 
            v-bind:hot-cities="hotCities" 
            v-bind:letter="letter" />
		
		<!-- 字母表：使用自定义事件引起父组件letter改变，进一步影响city-list组件改变 -->
		<city-alphabet 
            v-bind:cities="cities" 
            v-on:change="handleLetterChange" />
	</div>
</template>

<script type="text/javascript">
	import CityHead from './city/Head'
	import CitySearch from './city/Search'
	import CityList from './city/List'
	import CityAlphabet from './city/Alphabet'
	import axios from "axios"
    
    
    import {
		mapGetters
    } from 'vuex'


	export default{
		name:"City",
		data (){
			return {
				msg:"this is city page.",
				cities: {},
			    hotCities: [],
			    letter: ''    //当前letter,通用state作为prop传递到字母表和城市列表
			}
        },
        computed:{		
			...mapGetters(['env','city'])		
		},
		components:{
	    	CityHead,
	    	CitySearch,
	    	CityList,
	    	CityAlphabet
	    },
	    mounted(){  
            /**
             * 现在结合mock使用环境变量统一解决这个问题，不考虑webpack本地代理的使用方式
             */  	    
            axios.get(this.env.server8092+"travel/getCities").then((response)=>{
                var da = response.data;   
			    if(da.ret && da.data){
			    	this.cities=da.data.cities;
			    	this.hotCities=da.data.hotCities;
			    }
            });
	    },
	    methods:{
	    	handleLetterChange(letter){
	    		this.letter=letter;
	    	}
	    }
	}
</script>
